<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.meta.menuName }}</div>
    <!-- 表格操作 -->
    <div class="operation-container" style="margin-top: 10px">
      <el-button
          size="small"
          icon="el-icon-plus"
          @click="openFindModel(null)"
      >
        筛选
      </el-button>
      <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          :disabled="this.orderIdList.length == 0"
          @click="isDelete = true"
      >
        批量导出
      </el-button>
     </div>

    <!-- 表格展示 -->
    <el-table
        border
        :data="orderList"
        @selection-change="selectionChange"
        v-loading="loading"
    >
      <!-- 表格列 -->
      <el-table-column type="selection" width="55" />
      <!-- 订单号 -->
      <el-table-column prop="orderNo" label="订单号" align="center" />
      <!-- 下单用户 -->
      <el-table-column prop="user.userName" label="下单用户" align="center" />
      <!-- 接单用户 -->
      <el-table-column prop="handler.userName" label="接单用户" align="center" />
        <!-- 总价钱 -->
      <el-table-column prop="total" label="总价钱" align="center" />

      <!-- 订单状态 -->
      <el-table-column prop="status" label="订单状态" align="center">
        <template slot-scope="scope">
          {{ OrderStatus(scope.row.status)}}
        </template>
      </el-table-column>
      <!-- 支付状态 -->
      <el-table-column prop="payStatus" label="支付状态" align="center">
        <template slot-scope="scope">
          {{ PayStatus(scope.row.payStatus)}}
        </template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column prop="createdAt" label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createdAt }}
        </template>
      </el-table-column>
      <!-- 完成时间 -->
      <el-table-column prop="achievementTime" label="完成时间" align="center">
        <template slot-scope="scope">

          {{ scope.row.achievementTime}}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="editRow(scope.row.id)"
              type="text"
              size="small">
            处理
          </el-button>
          <el-button
              @click.native.prevent="openOrderWindows(scope.row.id)"
              type="text"
              size="small">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="pagination-container"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-size="size"
        :total="count"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
    />
<!--筛选弹出框-->
    <el-dialog title="筛选" :visible.sync="dialogFormVisible">
      <el-form :model="selectForm">
        <el-form-item label="订单状态">
          <!-- 订单状态 -->
          <el-select
              clearable
              size="small"
              v-model="selectForm.orderStatus"
              filterable
              placeholder="请选择订单状态"
              style="margin-right:1rem"
          >
            <el-option
                v-for="(item,key) in orderStatusList"
                :key=key
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <!-- 支付状态 -->
          <el-select
              clearable
              size="small"
              v-model="selectForm.payStatus"
              filterable
              placeholder="请选择订单状态"
              style="margin-right:1rem"
          >
            <el-option
                v-for="(item,key) in payStatusList"
                :key=key
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <div class="block">
            <el-date-picker
                v-model="selectForm.value"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="手机号码" >
          <el-input style="width: 130px"  v-model="selectForm.phoneNumber"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="reset()">重置</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </div>
    </el-dialog>

    <order-edit ref="orderEdit" :is-show="isShow" @close="closeEdit" />
  </el-card>
</template>

<script>

import OrderEdit from "@/views/components/orderEdit";
const {saveOrUpdateOrder, getOrderPage, deleteOrderList} = require("@/api/order");

export default {
  name:"MyType",
  created() {
    this.listCategories();
  },
  components:{
    OrderEdit

  },

  data: function() {
    return {
      isShow:false,
      dialogFormVisible:false,
      isDelete: false,
      loading: true,
      addOrEdit: false,
      keywords: null,
      categoryIdList: [],
      orderList: [],
      orderIdList:[],
      categoryForm: {
        id: null,
        name: ""
      },
      current: 1,
      size: 10,
      count: 0,
      orderStatusList:[
        {
          id:"1",
          name:"待处理"
        },
        {
          id:"2",
          name:"处理中"
        },
        {
          id:"3",
          name:"已发货"
        },
        {
          id:"4",
          name:"已取消"
        },
      ],
      payStatusList:[
        {
          id:"1",
          name:"待支付"
        },
        {
          id:"2",
          name:"已支付"
        },
        {
          id:"3",
          name:"已退款"
        },
      ],

      selectForm: {
        "orderStatus": "",
        "payStatus": "",
        "phoneNumber":"",
        "value":null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
    };
  },

  computed:{



    PayStatus() {
      return function(code) {
        let name = "";
        switch (code) {
          case "1"||1:
            name = "待支付";
            break;
          case "2"||2:
            name = "已支付";
            break;
          case "3"||3:
            name = "已退款";
            break;
          default:
            name = "未知状态"
            break;
        }
        return name;
      };
    },
    OrderStatus() {
      return function(code) {
        let name = "";
        switch (code) {
          case "1"||1:
            name = "待处理";
            break;
          case "2"||2:
            name = "处理中";
            break;
          case "3"||3:
            name = "已发货";
            break;
          case "4"||4:
            name = "已取消";
            break;
          default:
            name = "未知状态"
        }
        return name;
      };
    },

  },
  methods: {
    closeEdit(){
      this.isShow=false;
     },
    ok(){
      this.listCategories();
      this.dialogFormVisible=false;
    },
    reset(){
      console.log(this.value2)
      this.selectForm={
        "orderStatus": "",
        "payStatus": "",
        "phoneNumber":"",
        "value":null,
      }
    },
    //打开筛选弹窗
    openFindModel(){
      this.dialogFormVisible=true
    },
    selectionChange(orderList) {
      this.orderIdList = [];
      orderList.forEach(item => {
        this.orderIdList.push(item.id);
      });
    },
    editRow(id){
      this.$refs.orderEdit.listArticles(id).then(()=>{
        this.isShow=true;
      })
      //this.$refs("orderEdit").$emit("openEdit",id);
      // this.$router.push({name:'orderEdit',params:{
      //     id:id
      //   }});
    },
    searchCategories() {
      this.current = 1;
      this.listCategories();
    },
    sizeChange(size) {
      this.size = size;
      alert(size);
      this.listCategories();
    },
    currentChange(current) {
      this.current = current;
      this.listCategories();
    },
    async deleteCategory(id) {
      let param = [];
      if (id == null) {
        param = this.categoryIdList;
      } else {
        param = [id]
      }
      const res = await deleteTypeList(param);

      if (res.code) {
        this.$notify.success({
          title: "成功",
          message: res.msg
        });
        await this.listCategories();
      } else {
        this.$notify.error({
          title: "失败",
          message: res.msg
        });
      }
      this.isDelete = false;

    },
    async listCategories() {
      const param = {
        currentPage: this.current,
        pageSize: this.size,

      };
      let assign = Object.assign({},param,this.selectForm);
      console.log(assign)
      const res = await getOrderPage(assign);
      console.log(res.data.records)
      this.orderList = res.data.records;
      this.count = res.data.total;
      this.loading = false;
    },
    openModel(category) {
      if (category != null) {
        this.categoryForm = JSON.parse(JSON.stringify(category));
        this.$refs.categoryTitle.innerHTML = "修改分类";
      } else {
        this.categoryForm.id = null;
        this.categoryForm.name = "";
        this.$refs.categoryTitle.innerHTML = "添加分类";
      }
      this.addOrEdit = true;
    },
    async addOrEditCategory() {
      if (this.categoryForm.name.trim() == "") {
        this.$message.error("分类名不能为空");
        return false;
      }
      const res = await saveOrUpdateType(this.categoryForm);
      if (res.code) {
        this.$notify.success({
          title: "成功",
          message: res.msg
        });
        await this.listCategories();
      } else {
        this.$notify.error({
          title: "失败",
          message: res.msg
        });
      }
      this.addOrEdit = false;
    }
  }
};
</script>
